
<link href="./css/classPic.css" rel="stylesheet">

<div class="container-fluid" style="margin: 20px">
    <div class="skyblue-br-row row">
        <div class="col-xs-9 skyblue-br" >
            <div style="width: 100%;height: 100%; display: flex; justify-content: space-between">
                <div  class="flow-container"  >
                    <div id="myClassPicDiv" class="flow-main"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 skyblue-br" >
            <button onclick="addClassDiv()" type="button" class="btn btn-primary" style="margin: 20px">新建类图</button>
            <button onclick="addClassLinkDiv()" type="button" class="btn btn-primary" style="margin: 20px">新建关联</button>
            <button onclick="saveClass()" type="button" class="btn btn-success" style="margin: 20px"> 保存数据 </button>
            <button onclick="showClass()" type="button" class="btn btn-danger" style="margin: 20px"> 加载数据 </button>
            <textarea id="myClassSavedModel" style="width:100%;height:600px">
{ "class": "go.GraphLinksModel",
  "copiesArrays": true,
  "copiesArrayObjects": true,
  "nodeDataArray": [ {"key":"31fa23da-290d-46c5-bd7f-257476a50999", "name":"Test", "properties":[], "methods":[], "loc":"359.421875 147.19453125"} ],
  "linkDataArray": []}
            </textarea>
        </div>
    </div>
</div>

<div class="modal fade" id="addClassLinkDialog" role="dialog" aria-labelledby="setListItemLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" >链接类型</h5>
            </div>
            <select id="classLinkSelect" class="form-control">
                <option value="generalization">类继承</option>
                <option value="aggregation">接口实现</option>
            </select>
            <div class="modal-footer">
                <button type="button" data-target="#setListItem"  class="btn btn-danger" id="ClassLinkBack">取消</button>
                <button type="button" data-target="#setListItem"  class="btn btn-primary" id="ClassLinkDiv">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="addClassDialog" style="height: auto;" role="dialog" aria-labelledby="setListItemLabel" aria-hidden="true">
    <div class="modal-dialog" style="height: auto;" role="document">
        <div class="modal-content" style="height: auto;" >
            <div class="modal-header">
                <h5 class="modal-title" id="createSequenceTitle">编辑数据</h5>
            </div>
			<form id="Myform" name="Myform">
				<div class="input-group input-group-sm" style="margin: 20px;">
				  <span class="input-group-addon" >类名</span>
				  <input type="text" class="form-control" name="calssNameEt" id="calssNameEt" placeholder="" aria-describedby="sizing-addon3">
				</div>
				<div class="input-group input-group-sm" style="margin: 20px;">
				  <span class="input-group-addon">添加属性</span>
				  <button type="button" class="btn btn-primary btn-sm"  id="addPropertiesBtn" style="margin-left: 20px;">添加</button>
				</div>
				<ui id="propertiesUi" style="list-style-type:none">
					
				</ui>
				<div class="input-group input-group-sm" style="margin: 20px;margin-top: 50px;">
				  <span class="input-group-addon" >添加方法</span>
				  <button  type="button" class="btn btn-primary btn-sm" id="addMethodsBtn" style="margin-left: 20px;">添加</button>
				</div>
				<ui id="methodsUi" style="list-style-type:none">
				 
				</ui>
				
			</form>
            <div class="modal-footer" style="margin-top: 50px;">
                <button type="button" data-target="#setListItem"  class="btn btn-primary" id="addClassBtn">确定</button>
            </div>
        </div>
    </div>
</div>


<script src="./js/flowchart/classPic.js"></script>

<script>

    var myClassSavedModel = document.getElementById("myClassSavedModel");
    var classPic = new ClassPic("myClassPicDiv",myClassSavedModel);

    //显示数据
    classPic.initClassPic();

    function saveClass() {
        myClassSavedModel.value = classPic.saveClass();
    }

    function showClass() {
        classPic.loadClass();
    }
    
    function addClassLinkDiv() {
        classPic.createLink();
    }


	function addClassDiv() {
        $('#addClassDialog').modal('show');
    }
	

	$("#addClassBtn").click(function(){
		 $("#addClassDialog").modal("hide");
		 
		var data = $("#Myform").serializeArray();
		
		//解析数据
		var jsonNewStep = {
		    key: getId(),
		    name: '',
		    properties: [],
		    methods: []
		};		
		
		
		var propertiesNameEt = [];
		var propertiesTypeEt = [];
		var propertiesVisibilityEt = [];
		
		var methodsNameEt = [];
		var methodsVisibilityEt = [];
		var parametersNameEt = [];
		var parametersTypeEt = [];
		
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			if(dataItem.name === "calssNameEt"){
				jsonNewStep.name = dataItem.value;
			}
			if(dataItem.name.indexOf("propertiesNameEt") != -1){
				propertiesNameEt.push(dataItem)
			}
			if(dataItem.name.indexOf("propertiesTypeEt") != -1){
				propertiesTypeEt.push(dataItem)
			}
			if(dataItem.name.indexOf("propertiesVisibilityEt") != -1){
				propertiesVisibilityEt.push(dataItem)
			}
			
			if(dataItem.name.indexOf("methodsNameEt") != -1){
				methodsNameEt.push(dataItem)
			}
			if(dataItem.name.indexOf("methodsVisibilityEt") != -1){
				methodsVisibilityEt.push(dataItem)
			}
			if(dataItem.name.indexOf("parametersNameEt") != -1){
				parametersNameEt.push(dataItem)
			}
			if(dataItem.name.indexOf("parametersTypeEt") != -1){
				parametersTypeEt.push(dataItem)
			}
		}
		

		if(propertiesNameEt.length > 0){
			for (var j = 0; j < propertiesNameEt.length; j++) {
				var propertie = {};
				propertie.name = propertiesNameEt[j].value;
				propertie.type = propertiesTypeEt[j].value;
				propertie.visibility = propertiesVisibilityEt[j].value;
				jsonNewStep.properties.push(propertie);
			}
		}
		
		
		if(methodsNameEt.length > 0){
			for (var i = 0; i < methodsNameEt.length; i++) {
				
				var method = {
					name: "",
					parameters: [],
					visibility: ""
				}
				
			
				var id = methodsNameEt[i].name.substring(methodsNameEt[i].name.length - 16,methodsNameEt[i].name.length);
				
				
				
				if(parametersNameEt.length > 0){
					for (var j = 0; j < parametersNameEt.length; j++) {
							var id2 = parametersNameEt[j].name.substring(parametersNameEt[j].name.length - 16,parametersNameEt[j].name.length);
							
							console.log(id);
							console.log(id2);
							
							if (id === id2){
								var parameter = {name:'',type:''};
								parameter.name = parametersNameEt[j].value;
								parameter.type = parametersTypeEt[j].value;
								method.parameters.push(parameter);
							}
					}
				}

				method.name = methodsNameEt[i].value;
				method.visibility = methodsVisibilityEt[i].value;
				jsonNewStep.methods.push(method);
			}
		}
		
		 classPic.createStep(jsonNewStep);
		
		
	});
	


	$("#addPropertiesBtn").click(function (){
		//添加属性
		
		var getMyid = getId();
		
		var propertiesDiv = ' <li id="propertiesLi'+ getMyid +'" style="height: 50px;margin-left: 10px;"> '
				 + '<div id="">'		
				+ '			<div class="form-inline" style="padding: 10px">'
				+ '				<div class="input-group input-group-sm">'
				+ '				  <span class="input-group-addon" >name</span>'
				+ '				  <input type="text" class="form-control" id="propertiesNameEt'+ getMyid +'" name="propertiesNameEt'+ getMyid +'" placeholder="" style="width: 100px;" aria-describedby="sizing-addon3">'
				+ '				</div>'
				+ '				<div class="input-group input-group-sm">'
				+ '				  <span class="input-group-addon" >type</span>'
				+ '				  <input type="text" class="form-control" id="propertiesTypeEt'+ getMyid +'" name="propertiesTypeEt'+ getMyid +'" placeholder="" style="width: 100px;" aria-describedby="sizing-addon3">'
				+ '				</div>'
				+ '				<div class="input-group input-group-sm">'
				+ '				  <span class="input-group-addon" >visibility</span>'
				// + '				  <input type="text" class="form-control" id="propertiesVisibilityEt'+ getMyid +'" name="propertiesVisibilityEt'+ getMyid +'" placeholder="" style="width: 100px;" aria-describedby="sizing-addon3">'
				+'<select class="form-control" id="propertiesVisibilityEt'+ getMyid +'" name="propertiesVisibilityEt'+ getMyid +'">'
				+'	  <option>public</option>'
				+'	  <option>private</option>'
				+'	  <option>protected</option>'
				+'	  <option>package</option>'
				+'	</select>'
				+ '				</div>'
				+ '			    <button type="button" id="deletePropertiesBtn'+ getMyid +'" class="btn btn-danger btn-sm">删除</button>'
				+ '			<div>'
				+ '		</div>'
				+ '    </li>';
		
		$("#propertiesUi").append(propertiesDiv);
		$("#deletePropertiesBtn" + getMyid).click(function(){
			$("#propertiesLi" + getMyid).remove();
		});	
		
	});
	
	
	function getId() {
	    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
	        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
	        return v.toString(16);
	    });
	}
	
	$("#addMethodsBtn").click(function (){
		//添加属性
		
		var getMyid = getId();
		
		var methodsDiv = '<li id="methodsLi'+ getMyid +'" class="list-item" style="height: auto;margin-left: 10px;">'
					+ '	<div id="">'
					+ '		<div class="form-inline" style="padding: 10px">'
					+ '			<div class="input-group input-group-sm">'
					+ '			  <span class="input-group-addon" >name</span>'
					+ '			  <input type="text" class="form-control" placeholder="" id="methodsNameEt'+ getMyid +'" name="methodsNameEt'+ getMyid +'" style="width: 130px;" aria-describedby="sizing-addon3">'
					+ '			</div>'
					+ '			<div class="input-group input-group-sm">'
					+ '			  <span class="input-group-addon" >visibility</span>'
					// + '			  <input type="text" class="form-control" placeholder="" id="methodsVisibilityEt'+ getMyid +'" name="methodsVisibilityEt'+ getMyid +'" style="width: 130px;" aria-describedby="sizing-addon3">'
				
					+'<select class="form-control" id="methodsVisibilityEt'+ getMyid +'" name="methodsVisibilityEt'+ getMyid +'">'
					+'	  <option>public</option>'
					+'	  <option>private</option>'
					+'	  <option>protected</option>'
					+'	  <option>package</option>'
					+'	</select>'
					+ '			</div>'
					+ '			 <button  type="button" id="addParametersBtn'+ getMyid +'" class="btn btn-primary btn-sm" style="margin-left: 20px;">添加参数</button>'
					+ '		    <button type="button" id="deleteMethodsBtn'+ getMyid +'" class="btn btn-danger btn-sm">删除</button>'
					+ '		<div>'
					+ '	</div>'
					+ '	<ul id="parametersUi'+ getMyid +'" style="list-style-type:none;margin-left: 64px;">'

					+ '	</ul>'
				   + ' </li>';
			
		
		$("#methodsUi").append(methodsDiv);
		$("#deleteMethodsBtn" + getMyid).click(function(){
			$("#methodsLi" + getMyid).remove();
		});
		
		
		$("#addParametersBtn" + getMyid).click(function(){
			
			var getMyid2 = getId();
			
			var parametersDiv = '<li id="parametersLi'+ getMyid2 +'" class="list-item" style="height: auto;">'
						+ '			<div id="">'
						+ '				<div class="form-inline" style="padding: 5px">'
						+ '					<div class="input-group input-group-sm">'
						+ '						<span class="input-group-addon">参数</span>'
						+ '					  <span class="input-group-addon" >name</span>'
						+ '					  <input type="text" class="form-control" placeholder="" id="parametersNameEt'+ getMyid +'" name="parametersNameEt'+ getMyid +'" style="width: 130px;" aria-describedby="sizing-addon3">'
						+ '					</div>'
						+ '					<div class="input-group input-group-sm">'
						+ '					  <span class="input-group-addon" >type</span>'
						+ '					  <input type="text" class="form-control" placeholder="" id="parametersTypeEt'+ getMyid +'" name="parametersTypeEt'+ getMyid +'" style="width: 130px;" aria-describedby="sizing-addon3">'
						+ '					</div>'
						+ '				    <button type="button" id="deleteParametersBtn'+ getMyid2 +'" class="btn btn-danger btn-sm">删除</button>'
						+ '				<div>'
						+ '			</div>'
						+ '		</li>';
			
			$("#parametersUi" + getMyid).append(parametersDiv);
			$("#deleteParametersBtn" + getMyid2).click(function(){
				$("#parametersLi" + getMyid2).remove();
			});
			
		});

	});

</script>	
	
